<template>
	<view>
		<!-- <view class="">
			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-margin tn-text-bold tn-text-xl">
					AI匹配最合适你的那个TA
				</view>
			</view>
		</view>

		<view class="tn-margin-left tn-text-sm tn-color-gray" style="margin-top: -25rpx;">
			<text>左滑不喜欢，右滑喜欢，并自动发送一条打招呼！</text>
		</view> -->
		<view class="nav-title">
			<view class="title">AI匹配最合适你的那个TA</view>
			<view class="ftitle">左滑不喜欢，右滑喜欢，并自动发送一条打招呼！</view>
		</view>

		<tantan :list="list" @onChange="change" @onClickImage="clickImage"></tantan>
		<!-- <view class=" tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin-left tn-margin-right">

			<view
				class="tn-info__item tn-bg-bluepurple tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white"
				@click="navigateToFn({ url: '/minePages/ai/pipei', checkLogin: true })">
				<view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
					<view class="tn-info__item__left__content">
						<view class="tn-info__item__left__content--title tn-text-xxl">语音匹配</view>
						<view class="tn-info__item__left__content--data tn-padding-top-xs">
							<text class="tn-info-text">每次匹配3个钻石</text>
							<text class="tn-icon-right tn-padding-left-xs"></text>
						</view>
					</view>
				</view>
			
			</view> -->
			<!-- <view class="">1</view> -->
			<view
				class="wfw-kuaisu tn-info__item tn-bg-purplered tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white"
				@click="goissue">
				<view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
					<view class="tn-info__item__left__content">
						<view class="tn-info__item__left__content--title ">快速服务</view>
						<view class="tn-info__item__left__content--data tn-padding-top-xs">
							<text class="tn-info-text">精确匹配,快速派单</text>
							<text class="tn-icon-right tn-padding-left-xs"></text>
						</view>
					</view>
				</view>
				<!-- <view class="tn-info__item__right">
					<view class="tn-info__item__right--icon">
						<view class="tn-icon-voice-fill"></view>
					</view>
				</view> -->
			</view>


		</view>

		<!-- <view class="tn-margin-left tn-margin-right">
			<view class="tn-flex ">
				<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center"
					@click="navigateToFn({ url: '/homePages/planet', checkLogin: true })">
					<tn-button shape="round" backgroundColor="#FFF00D" padding="40rpx 0" width="60%" shadow fontBold>
						<text class="tn-icon-light tn-padding-right-xs tn-color-black"></text>
						<text class="tn-color-black">开启我的星球</text>
						<text class="tn-icon-light tn-padding-left-xs tn-color-black"></text>
					</tn-button>
				</view>
			</view>

		</view> -->


	</view>
</template>

<script>
	import tantan from '@/minePages/dgex-tantan/dgex-tantan.vue'
	export default {
		components: {
			tantan
		},
		data() {
			return {
				page: 1,
				user_id: 0,
				list: []
			}
		},
		onLoad(option) {

			this.info()
			this.user_id = uni.getStorageSync('user_id')
		},

		methods: {
			goissue(){
				uni.navigateTo({
					url:"issue"
				})
			},


			async info() {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/api/index/pipei',
					data: {
						page: that.page,
					}
				});

				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						if (that.page == 1) {
							that.list = result.data.data.data;
						} else {
							that.list = that.list.concat(result.data.data.data);
						}
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}


			},







			change(data) {
				// 判断倒数
				if (data.currentIndex > this.list.length - 5) {
					this.page++;
					this.info()
				}
				if (data.type == 'love') {
					let message = '{"data":"你好呀，认识你是一种缘分，可以认识你吗？","sec":"0","type":"text","fromid":"' + data.currentItem
						.id + '","toid":"' + this.user_id + '"}';
					this.save_message(message);
				}

			},
			clickImage(data) {
				this.navigateToFn({
					url: '/circlePages/blogger_other_user?id=' + data.currentItem.id,
					checkLogin: true
				})

			},

			async save_message(datassd) {
				let that = this;
				this.$socket.send(datassd);
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/api/chat/save_message',
					data: datassd
				});

			},



		}
	}
</script>
<style lang="scss" scoped>
	.wfw-kuaisu{
		margin-left: 30rpx !important;
		// width: 92% !important;
	}
	.nav-title {
		padding: 30rpx 0 0 30rpx;
		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #FFFFFF;
		}

		.ftitle {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			margin-top: 15rpx;
		}
	}
	.tn-info-text{
		font-size: 26rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
	.tn-bg-purplered {
		background-color: #06A9FF !important;
	}


	/* 业务展示 start */
	.tn-info {

		&__container {
			margin-top: 10rpx;
			margin-bottom: 50rpx;
		}

		&__item {
			width: 48%;
			margin: 15rpx 0rpx;
			padding: 40rpx 30rpx;
			border-radius: 15rpx;


			position: relative;
			z-index: 1;

			&::after {
				content: " ";
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;

			}

			&__left {

				&--icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					font-size: 40rpx;
					margin-right: 20rpx;
					position: relative;
					z-index: 1;

					&::after {
						content: " ";
						position: absolute;
						z-index: -1;
						width: 100%;
						height: 100%;
						left: 0;
						bottom: 0;
						border-radius: inherit;
						opacity: 1;
						transform: scale(1, 1);
						background-size: 100% 100%;

					}
				}

				&__content {
					font-size: 30rpx;

					&--data {
						margin-top: 5rpx;
						font-weight: bold;
					}
				}
			}

			&__right {
				&--icon {
					position: absolute;
					right: 0rpx;
					top: 50rpx;
					font-size: 100rpx;
					width: 108rpx;
					height: 108rpx;
					text-align: center;
					line-height: 60rpx;
					opacity: 0.15;
				}
			}
		}
	}

	/* 业务展示 end */
</style>